<template>
  <div class="tag-monitor-page" :style="{ height: documentClientHeight }">
    <div class="monitor-time-area">
      <p>平台监控</p>
      <div class="monitor-time">
        {{ date }}
      </div>
    </div>
    <data-item-wrap class="data-item data-item-1" title="标签管理汇总" :refreshFn="getTagManageSummary">
      <div class="data-item1-content">
        <div class="icon-count-item">
          <tag-icon img="tagSys"></tag-icon>
          <span class="count">{{ manageSummary.catalogClassCount }}</span>
          <span class="name">标签体系</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagPack"></tag-icon>
          <span class="count">{{ manageSummary.packetCount }}</span>
          <span class="name">标签包</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagEnum"></tag-icon>
          <span class="count">{{ manageSummary.enumCount }}</span>
          <span class="name">标签枚举值</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagAlbum"></tag-icon>
          <span class="count">{{ manageSummary.albumCount }}</span>
          <span class="name">标签专辑</span>
        </div>
      </div>
    </data-item-wrap>
    <data-item-wrap class="data-item data-item-2" title="标签需求汇总" :refreshFn="getTagRequireSummary">
      <div class="data-item2-content">
        <div class="chart" id="estimate"></div>
        <div class="dotted"></div>
        <div class="tip-text">近3个月版本状态环形图</div>
        <div class="count-name-center">
          <div class="count">{{ requireSummary.onlineCount }}</div>
          <div class="name">已验收</div>
          <!-- <div class="count count-bottom">{{ requireSummary.untreatedRequireCount }}</div>
          <div class="name">暂未处理</div> -->
        </div>
      </div>
    </data-item-wrap>
    <data-item-wrap class="data-item data-item-3" title="标签接入汇总" :refreshFn="getTagSourceSummary">
      <div class="data-item3-content">
        <div class="icon-count-item">
          <tag-icon img="tagPlatform"></tag-icon>
          <span class="count">{{ sourceSummary.plfmCount }}</span>
          <span class="name">平台</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagTable"></tag-icon>
          <span class="count">{{ sourceSummary.tableCount }}</span>
          <span class="name">表</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagField"></tag-icon>
          <span class="count">{{ sourceSummary.fieldCount }}</span>
          <span class="name">字段</span>
        </div>
      </div>
    </data-item-wrap>
    <data-item-wrap class="data-item data-item-4" title="标签质量汇总" :refreshFn="getTagQualitySummary">
      <div class="data-item4-content">
        <div class="content-item content-left">
          <tag-progress
            type="circle"
            :percentage="qualitySummary.coverage"
            :behindStrokeWidth="3"
            :gapWidth="7"
            stroke-linecap="square"
            color="#26feff"
            bebindColor="#297189"
            class="quality-progress"
            :width="104"
          >
            <div slot="content" class="quality-inner-text">
              覆盖度
              <p>{{ qualitySummary.coverage }}%</p>
            </div>
          </tag-progress>
          <div class="name">标签数据质量<br />监控覆盖度</div>
          <!-- <div class="content-round">
            覆盖度<br />
            <span>{{ qualitySummary.coverage }}%</span>
          </div>
          <div class="name">标签数据质量<br />监控覆盖度</div> -->
        </div>
        <div class="content-item content-right">
          <div class="content-round">{{ qualitySummary.alarmCount }}</div>
          <div class="name">标签数据质量<br />问题个数</div>
        </div>
      </div>
    </data-item-wrap>
    <data-item-wrap class="data-item data-item-5" title="标签用户综汇总" :refreshFn="getTagUserSummary">
      <div class="data-item5-content">
        <div class="content-item content-left">
          <div class="count">{{ userSummary.masterBranchDeptCount }}</div>
          <div class="name">总行部门</div>
          <div class="count count-bottom">{{ userSummary.masterBranchUserCount }}</div>
          <div class="name">总行用户</div>
        </div>
        <div class="dotted"></div>
        <div class="content-item content-center">
          <div class="count">{{ userSummary.subBranchDeptCount }}</div>
          <div class="name">分行部门</div>
          <div class="count count-bottom">{{ userSummary.subBranchUserCount }}</div>
          <div class="name">分行用户</div>
        </div>
        <div class="dotted"></div>
        <div class="content-item content-right">
          <div class="content-right__top">
            <i class="el-icon-caret-top"></i>
            <span>上升</span>
          </div>
          <div class="count">{{ userSummary.userGroupCount }}</div>
          <div class="status-name">用户增长情况</div>
        </div>
      </div>
    </data-item-wrap>
    <data-item-wrap class="data-item data-item-6" title="标签使用汇总" :refreshFn="getTagUsageSummary">
      <div class="data-item6-content">
        <div class="icon-count-item">
          <tag-icon img="tagSearch"></tag-icon>
          <span class="count">{{ usageSummary.searchCount }}</span>
          <span class="name">标签搜索次数</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagCheck"></tag-icon>
          <span class="count">{{ usageSummary.watchCount }}</span>
          <span class="name">详情浏览次数</span>
        </div>
        <div class="icon-count-item">
          <tag-icon img="tagTransfer"></tag-icon>
          <span class="count">{{ usageSummary.apiCallCount }}</span>
          <span class="name">画像标签使用次数</span>
        </div>
      </div>
    </data-item-wrap>
    <div class="monitor-disc">
      <img class="spin" src="~@/assets/img/monitor/outerCircle.png" alt="" />
      <div class="disc-item disc-item-1">标签<br />管理</div>
      <div class="disc-item disc-item-2">标签<br />质量</div>
      <div class="disc-item disc-item-3">标签<br />用户</div>
      <div class="disc-item disc-item-4">标签<br />使用</div>
      <div class="disc-item disc-item-5">标签<br />接入</div>
      <div class="disc-item disc-item-6">标签<br />需求</div>
      <div class="disc-count">{{ countSummary.tagCount }}</div>
      <p>标签总数</p>
    </div>
  </div>
</template>

<script>
import DataItemWrap from './data-item-wrap'
import TagIcon from './tag-icon'
import * as echarts from 'echarts'
import $monitor from './api'

export default {
  name: 'TagMonitorPage',
  components: { DataItemWrap, TagIcon },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight - 90 + 'px'
      }
    }
  },
  data() {
    return {
      estimatechart: null,
      date: '',
      countSummary: { tagCount: '' }, // 总数
      manageSummary: {
        // 标签管理汇总
        albumCount: '', // 标签专辑
        catalogClassCount: '', // 标签体系
        enumCount: '', // 标签枚举值
        packetCount: '' // 标签包
      },
      requireSummary: {
        // 标签需求汇总
        onlineCount: '', // 已验收
        statusSummaryDTOList: [
          {
            statusCode: '',
            statusCount: '',
            statusDesc: ''
          }
        ]
      },
      sourceSummary: {
        // 接入汇总
        fieldCount: '',
        plfmId: '',
        plfmNm: '',
        plfmCount: '',
        tableCount: ''
      },
      qualitySummary: {
        // 质量汇总
        alarmCount: '', // 问题个数
        coverage: 0 // 覆盖度
      },
      usageSummary: {
        // 使用总汇
        apiCallCount: '', // 调用次数
        searchCount: '', // 搜索次数
        watchCount: '' // 浏览次数
      },
      userSummary: {
        // 用户总汇
        masterBranchDeptCount: '', // 总行部门个数
        masterBranchUserCount: '', // 总行部门用户个数
        subBranchDeptCount: '', //分行部门个数
        subBranchUserCount: '', // 分行部门用户个数
        userGroupCount: '' // 用户增长情况
      }
    }
  },
  methods: {
    initEstimateChart(dataAssess) {
      let legend = dataAssess.map(item => item.statusDesc)
      let data = []
      dataAssess.forEach(v => {
        /*  if (v.dataAssetQuadrant === 1) data.push({ value: v.num, name: '精品数据' })
         else if (v.dataAssetQuadrant === 2) data.push({ value: v.num, name: '价值潜力' })
         else if (v.dataAssetQuadrant === 4) data.push({ value: v.num, name: '有待改善' })
         else if (v.dataAssetQuadrant === 3) data.push({ value: v.num, name: '难以使用' }) */
        data.push({ value: v.statusCount, name: v.statusDesc })
      })
      this.estimatechart = echarts.init(document.getElementById('estimate'))
      let option = {
        legend: {
          // type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 12,
          bottom: 10,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          textStyle: {
            color: '#6fd3fb',
            fontSize: 12
          },
          pageIconColor: '#26feff',
          pageIconInactiveColor: '#aaa',
          data: legend
        },
        tooltip: {
          trigger: 'item'
        },
        color: ['#ff692e', '#ffcd48', '#56e49c', '#26feff', '#267dff', '#8f52ff', '#fc2aff', '#43a43e'],
        series: [
          {
            type: 'pie',
            radius: ['60%', '85%'],
            center: ['25%', '50%'],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      this.estimatechart.setOption(option)
      window.addEventListener('resize', () => {
        this.estimatechart.resize()
      })
    },
    getTime() {
      let mytime = new Date()
      let year = mytime.getFullYear()
      let month = mytime.getMonth() + 1 < 10 ? '0' + (mytime.getMonth() + 1) : mytime.getMonth() + 1
      let day = mytime.getDate() < 10 ? '0' + mytime.getDate() : mytime.getDate()
      let hour = mytime.getHours() < 10 ? '0' + mytime.getHours() : mytime.getHours()
      let minute = mytime.getMinutes() < 10 ? '0' + mytime.getMinutes() : mytime.getMinutes()
      let second = mytime.getSeconds() < 10 ? '0' + mytime.getSeconds() : mytime.getSeconds()
      this.date = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      setTimeout(this.getTime, 1000)
    },
    getTagCountSummary() {
      //  获取标签总数汇总
      return $monitor.getTagCountSummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.countSummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagManageSummary() {
      // 获取标签管理汇总
      return $monitor.getTagManageSummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.manageSummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagRequireSummary() {
      // 获取标签需求汇总
      return $monitor.getTagRequireSummary().then(({ data }) => {
        if (data && data.code === '0') {
          let requireData = [
            {
              statusCode: 10,
              statusCount: '0',
              statusDesc: '需求提出'
            },
            {
              statusCode: 15,
              statusCount: '0',
              statusDesc: '部门审核'
            },
            {
              statusCode: 20,
              statusCount: '0',
              statusDesc: '需求初审'
            },
            {
              statusCode: 30,
              statusCount: '0',
              statusDesc: '需求复审'
            },
            {
              statusCode: 35,
              statusCount: '0',
              statusDesc: '需求澄清'
            },
            {
              statusCode: 40,
              statusCount: '0',
              statusDesc: '需求开发'
            },
            {
              statusCode: 45,
              statusCount: '0',
              statusDesc: '标签验证'
            },
            {
              statusCode: 50,
              statusCount: '0',
              statusDesc: '需求验收'
            }
            // {
            //   statusCode: 0,
            //   statusCount: '37',
            //   statusDesc: '已验收'
            // }
          ]
          this.requireSummary = data.data
          data.data.statusSummaryDTOList.forEach(item => {
            let index = requireData.findIndex(status => status.statusCode === item.statusCode)
            if (index >= 0) {
              requireData[index].statusCount = item.statusCount
            }
            if (item.statusCode === 0) {
              this.requireSummary.onlineCount = item.statusCount
            }
          })
          this.initEstimateChart(requireData)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagSourceSummary() {
      // 获取标签接入汇总
      return $monitor.getTagSourceSummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.sourceSummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagQualitySummary() {
      // 标签质量汇总
      return $monitor.getTagQualitySummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.qualitySummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagUsageSummary() {
      // 获取标签使用监控
      return $monitor.getTagUsageSummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.usageSummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTagUserSummary() {
      // 获取标签用户汇总
      return $monitor.getTagUserSummary().then(({ data }) => {
        if (data && data.code === '0') {
          this.userSummary = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  },
  created() {
    this.getTime()
    let {
      getTagCountSummary,
      getTagManageSummary,
      getTagRequireSummary,
      getTagSourceSummary,
      getTagQualitySummary,
      getTagUsageSummary,
      getTagUserSummary
    } = this
    Promise.all([
      getTagCountSummary(),
      getTagManageSummary(),
      getTagRequireSummary(),
      getTagSourceSummary(),
      getTagQualitySummary(),
      getTagUsageSummary(),
      getTagUserSummary()
    ])
  }
}
</script>

<style lang="scss" scoped>
/*
  background: url(~@/assets/img/monitor/bezel.png) no-repeat;
  background: url(~@/assets/img/monitor/bezelBottom.png) no-repeat;
  background: url(~@/assets/img/monitor/contentBg.png) no-repeat;
  background: url(~@/assets/img/monitor/itemBg.png) no-repeat;
  background: url(~@/assets/img/monitor/tagAlbum.png) no-repeat;
  background: url(~@/assets/img/monitor/tagCheck.png) no-repeat;
  background: url(~@/assets/img/monitor/tagDash.png) no-repeat;
  background: url(~@/assets/img/monitor/tagEnum.png) no-repeat;
  background: url(~@/assets/img/monitor/tagPack.png) no-repeat;
  background: url(~@/assets/img/monitor/tagSearch.png) no-repeat;
  background: url(~@/assets/img/monitor/tagSpin.png) no-repeat;
  background: url(~@/assets/img/monitor/tagSys.png) no-repeat;
  background: url(~@/assets/img/monitor/tagTransfer.png) no-repeat;
  background: url(~@/assets/img/monitor/tagYuanquan.png) no-repeat;
  background: url(~@/assets/img/monitor/dapanji.png) no-repeat;
  background: url(~@/assets/img/monitor/timeWrap.png) no-repeat;
*/
$itemPosition: 5vw;
$itemMargin: 4%;
$m14px: 0.7vw;
$m16px: 0.8vw;
$m18px: 0.9vw;
$m24px: 0.95vw;
$m26px: 1vw;
$m28px: 1.2vw;
$m44px: 1.5vw;
@mixin dotted {
  border-right: 1px dotted #26feff;
  height: 3vh;
  width: 0;
  transform: scaleY(4);
}
.tag-monitor-page {
  position: relative;
  background: url(~@/assets/img/monitor/contentBg.png) no-repeat;
  background-size: 100% 100%;
  .dotted {
    @include dotted;
  }
  .icon-count-item {
    flex-grow: 1;
    width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .count {
      font-size: $m28px;
      font-weight: bold;
      text-shadow: 0 0 1px #26feff;
      color: #26feff;
      margin-top: 1vh;
    }
    .name {
      color: #fff;
      font-size: 0.8vw;
      font-weight: bold;
      margin-top: 0.5vh;
    }
  }
  .monitor-time-area {
    color: #fff;
    text-align: center;
    overflow: hidden;
    > p {
      margin-top: 5vh;
      margin-bottom: 0.5vh;
      font-size: 2vw;
    }
    .monitor-time {
      width: 35vw;
      height: 4.2vh;
      line-height: 4.2vh;
      font-size: 1.2vw;
      margin: 0 auto;
      background-image: url(~@/assets/img/monitor/timeWrap.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .monitor-disc {
    width: 28vw;
    height: 28vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(~@/assets/img/monitor/tagDash.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .spin {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .spin {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -52%);
      animation: circleRotate 15s linear infinite;
      z-index: -1;
      opacity: 0.8;
    }
    @keyframes circleRotate {
      0% {
        transform: translate(-50%, -52%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -52%) rotate(360deg);
      }
    }
    .disc-item {
      font-weight: bold;
      font-size: $m28px;
      color: #fff;
      text-shadow: 0 0 1px #fff;
      position: absolute;
    }
    $discVer: 18%;
    $discTop2: 0%;
    $discTop3: 0%;
    $discHor: 31%;
    .disc-item-1 {
      top: $discVer;
      left: $discHor;
    }
    .disc-item-2 {
      top: $discVer;
      right: $discHor;
    }
    .disc-item-3 {
      top: 50%;
      transform: translateY(-50%);
      right: 16%;
    }
    .disc-item-4 {
      bottom: $discVer;
      right: $discHor;
    }
    .disc-item-5 {
      bottom: $discVer;
      left: $discHor;
    }
    .disc-item-6 {
      top: 50%;
      transform: translateY(-50%);
      left: 16%;
    }
    .disc-count {
      font-size: $m44px;
      color: #fff;
      font-weight: bold;
      position: absolute;
      top: 47%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    > p {
      font-weight: bold;
      font-size: 1.1vw;
      position: absolute;
      top: 52%;
      color: #fff;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .data-item {
    position: absolute;
  }
  .data-item-1 {
    left: $itemPosition;
    top: $itemMargin;
    .data-item1-content {
      display: flex;
      justify-content: space-around;
      margin-top: 1.5vh;
      padding: 0.5vh 2vw;
    }
  }
  .data-item-2 {
    left: $itemPosition;
    top: 50%;
    transform: translateY(-50%);
    // .data-content {
    //   height: 100%;
    // }
    .data-item2-content {
      height: 100%;
      padding: 0.7vh 2.6vw 0.7vh 2vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .chart {
        // width: 13vw;
        width: 80%;
        /* min-width: 226px; */
        height: 12vh;
      }
      .dotted {
        height: 2.2vh;
      }
      .tip-text {
        position: absolute;
        font-size: $m16px;
        bottom: 3.6vh;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
      }
    }
  }
  .data-item-3 {
    left: $itemPosition;
    bottom: $itemMargin;
    .data-item3-content {
      display: flex;
      justify-content: space-around;
      margin-top: 1.5vh;
      padding: 0.5vh 2vw;
      //   margin-top: 1vh;
      //   padding: 0 2vw;
      //   .source-item {
      //     background: url(~@/assets/img/monitor/bezelBottom.png) 100% 100% no-repeat;
      //     margin-bottom: 1.5vh;
      //     display: flex;
      //     flex-wrap: nowrap;
      //     align-items: center;
      //     justify-content: space-around;
      //     margin-left: -1.5vw;
      //     padding: 0.6vh 0;
      //     .tagIcon {
      //       background: url(~@/assets/img/monitor/bezel.png) no-repeat;
      //       width: 3vw;
      //       height: 3vw;
      //       padding: 0.5vw;
      //       text-align: center;
      //       margin-top: -0.7vh;
      //     }
      //     .source-name {
      //       color: #fefefe;
      //       font-weight: bold;
      //       font-size: 0.8vw;
      //     }
      //     .count-name {
      //       font-weight: bold;
      //       .count {
      //         color: #26feff;
      //         font-size: $m28px;
      //         margin-bottom: 0.3vh;
      //       }
      //       .name {
      //         font-size: $m16px;
      //         color: #fff;
      //       }
      //     }
      //   }
    }
  }
  .data-item-4 {
    right: $itemPosition;
    top: $itemMargin;
    .data-item4-content {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      margin-top: 1.4vh;
      padding: 0 1.5vw;
      .content-item {
        display: flex;
        flex: 1;
        flex-shrink: 0;
        text-align: center;
        flex-direction: column;
        align-items: center;
      }
      .content-round {
        width: 9.5vh;
        height: 9.5vh;
        margin-bottom: 1.5vh;
        border-radius: 50%;
        font-weight: bold;
        position: relative;
      }
      .content-left {
        margin-top: -0.75vh;
        .quality-progress {
          /*    width: 7vw;
          height: 7vw; */
          margin-bottom: 4px;
        }
        .quality-inner-text {
          font-size: $m14px;
          color: #fff;
          > p {
            color: #26feff;
            font-size: $m28px;
            font-weight: bold;
            margin-top: 0.6vh;
          }
        }
        .content-round {
          color: #fff;
          border: 5px solid #297189;
          border-radius: 50%;
          padding-top: 2vh;
          span {
            display: inline-block;
            font-size: $m28px;
            margin-top: 0.5vh;
            color: #26feff;
          }
        }
      }
      .content-right {
        .content-round {
          font-size: $m28px;
          color: #26feff;
          background: radial-gradient(circle, rgba(255, 255, 255, 0), rgba(#1e8be8, 0.3));
          line-height: 9.5vh;
          &::before {
            width: 11vh;
            height: 11vh;
            content: '';
            position: absolute;
            top: -0.75vh;
            left: -0.75vh;
            border: 2px solid #26feff;
            border-radius: 50%;
          }
        }
      }
      .name {
        font-size: $m16px;
        color: #fff;
      }
    }
  }
  .data-item-5 {
    right: $itemPosition;
    top: 50%;
    transform: translateY(-50%);
    .data-item5-content {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      margin-top: 1.2vh;
      padding: 0.5vh 2vw;
      .content-item {
        flex: 1;
        flex-shrink: 0;
      }
      .content-left,
      .content-center {
        text-align: center;
        .count {
          color: #26feff;
          text-shadow: 0 0 1px #26feff;
          font-size: $m28px;
          font-weight: bold;
          margin-bottom: 0.1vh;
        }
        .name {
          color: #fff;
          font-size: $m16px;
          font-weight: bold;
        }
        .count-bottom {
          margin-top: 2vh;
        }
      }
      .content-right {
        padding: 2vh 0;
        text-align: center;
        font-weight: bold;
        .content-right__top {
          color: #ff692e;
          font-size: $m14px;
          > i {
            font-size: 1.2vw;
          }
          > span {
            vertical-align: text-top;
          }
          margin-bottom: 0.5vh;
        }
        .count {
          color: #ff692e;
          font-size: $m28px;
          margin-bottom: 1vh;
        }
        .status-name {
          font-size: $m16px;
          color: #fff;
        }
      }
    }
  }
  .data-item-6 {
    right: $itemPosition;
    bottom: $itemMargin;
    .data-item6-content {
      display: flex;
      justify-content: space-around;
      margin-top: 1.5vh;
      padding: 0.5vh 2vw;
    }
  }
  .count-name-center {
    text-align: center;
    .count {
      color: #26feff;
      text-shadow: 0 0 1px #26feff;
      font-size: $m28px;
      font-weight: bold;
      margin-bottom: 1vh;
    }
    .name {
      color: #fff;
      font-size: $m16px;
      font-weight: bold;
    }
    .count-bottom {
      margin-top: 2vh;
    }
  }
}
/* @keyframes roundRotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
} */
</style>
